<template>
    <!-- 搜索框组件 -->
    <div style="width: 100%">
      <div class="operationBtn">
        <div class="screenBtn">
          <div class="packUp btn" @click="packUp">
            <i
              :class="searchStyle ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            ></i>
            {{ searchStyle ? "展开" : "收起" }}筛选
          </div>
        </div>
      </div>
      <div
        class="Form"
        :class="searchStyle ? 'lineSearch' : ''"
        :style="{ ...searchStyle, transition: 'all 0.2s' }"
      >
        <div
          class="common-search-item"
          v-for="(item, index) in formConfig"
          :key="index"
        >
          <div class="label" :style="{ width: `${labelWidth} !important` }">
            {{ item.label }}:
          </div>
          <!-- 输入框 -->
          <el-input
            v-if="item.type === 'input'"
            v-model="formData[item.prop]"
            placeholder="请输入"
            @keyup.enter.native="search"
            @blur="search"
            @clear="search"
            clearable
          ></el-input>
  
          <!-- 下拉框 -->
          <el-select
            v-if="item.type === 'select'"
            filterable
            v-model="formData[item.prop]"
            placeholder="请选择"
            @change="selectChange(index, item)"
            clearable
          >
            <el-option
              v-for="(option, index) in item.options"
              :key="index"
              :label="option[item.optionKey.label]"
              :value="option[item.optionKey.value]"
            ></el-option>
          </el-select>
          <span class="dateBtnBox select" v-if="item.type === 'select'">
            <el-button class="allbtn" @click="selectClear(item)">全部</el-button>
            <div class="optionbox">
              <span
                class="dateBtn"
                v-for="(option, i) in item.options"
                :key="i"
                v-show="i < 10"
                :class="{ active: selectList[index] === i }"
                @click="selectFn(index, i, item)"
              >
                {{ option[item.optionKey.label] }}
              </span>
            </div>
          </span>

          <!-- 下拉框 多选 -->
          <el-select
            v-if="item.type === 'selects'"
            filterable
            multiple
            collapse-tags
            v-model="formData[item.prop]"
            placeholder="请选择"
            @change="selectChange(index, item)"
            clearable
          >
            <el-option
              v-for="(option, index) in item.options"
              :key="index"
              :label="option[item.optionKey.label]"
              :value="option[item.optionKey.value]"
            ></el-option>
          </el-select>
  
          <!-- 单选框 -->
          <el-radio-group
            v-if="item.type === 'radio'"
            v-model="formData[item.prop]"
            @change="search"
          >
            <el-radio
              v-for="radio in item.options"
              :label="radio[item.optionKey.value]"
              :key="radio[item.optionKey.label]"
            >
              {{ radio[item.optionKey.label] }}
            </el-radio>
          </el-radio-group>
  
          <!-- 复选框 -->
          <el-checkbox-group
            v-if="item.type === 'checkbox'"
            v-model="formData[item.prop]"
            @change="search"
          >
            <el-checkbox-button
              v-for="checkbox in item.options"
              :label="checkbox[item.optionKey.label]"
              :key="checkbox[item.optionKey.label]"
            ></el-checkbox-button>
          </el-checkbox-group>
  
          <!-- 级联 -->
          <el-cascader
            v-if="item.type === 'cascader'"
            v-model="formData[item.prop]"
            :options="item.options"
            placeholder="请选择"
            @change="cascaderChange(item.change)"
            filterable
            clearable
            :props="item.optionKey"
          >
          </el-cascader>
  
          <!-- 时间 -->
          <el-date-picker
            v-if="item.type === 'year'"
            v-model="formData[item.prop]"
            type="year"
            value-format="yyyy"
            @change="yearChange(item.change)"
            clearable
          >
          </el-date-picker>
  
          <!-- 时间 -->
          <el-date-picker
            v-if="item.type === 'date'"
            v-model="formData[item.prop]"
            type="date"
            value-format="yyyy-MM-dd"
            @change="yearChange(item.change)"
            clearable
          >
          </el-date-picker>
  
          <!-- 时间范围 -->
          <el-date-picker
            v-if="item.type === 'daterange'"
            v-model="formData[item.prop]"
            type="datetimerange"
            class="dateRange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            :format="item.format || 'yyyy-MM-dd'"
            @change="dateChange"
            clearable
          >
          </el-date-picker>
          <span class="dateBtnBox" v-if="item.type === 'daterange'">
            <el-button class="allbtn" @click="dateFn(2)">全部</el-button>
            <div class="optionbox">
              <span
                class="dateBtn"
                :class="{ active: dateActive == 1 }"
                @click="dateFn(1)"
                >最近一周</span
              >
              <span
                class="dateBtn"
                :class="{ active: dateActive == 2 }"
                @click="dateFn(2)"
                >最近一个月</span
              >
              <!-- <span
                class="dateBtn"
                :class="{ active: dateActive == 3 }"
                @click="dateFn(3)"
                >最近三个月</span
              > -->
            </div>
          </span>
  
          <!-- 状态框 -->
          <div v-if="item.type === 'selectbutton'" class="selectbutton">
            <div class="butt-list-sty">
              <div
                v-for="(ite, i) in item.options"
                :key="i"
                class="basebut2"
                :class="i === itemtypeactive ? 'basebut1' : 'basebut2'"
                @click="itemtypeChange(i, item, ite)"
              >
                {{ ite.itemTypeName }}
                <div
                  v-if="ite.itemTypeName === item.sizeProp && item.numone > 0"
                  class="toprightred"
                >
                  {{ item.numone }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import Vue from "vue";
  
  export default Vue.extend({
    props: {
      // 表单域标签的宽度
      labelWidth: {
        type: String,
        default: "100px",
      },
      // 表单域标签的位置
      labelPosition: {
        type: String,
        default: "left",
      },
      // 表单配置
      formConfig: {
        type: Array,
        required: true,
      },
      // 表单数据
      formData: {
        type: Object,
        required: true,
      },
      // 级联数据
      options: {
        type: Array,
      },
    },
    data() {
      return {
        searchStyle: {
          height: 0,
          padding: 0,
          overflow: "hidden",
        },
        selectList: [],
        dateActive: "",
        itemtypeactive: "",
        pickerOptions: {
            disabledDate(time) {
                return time.getTime() < Date.now() - 31 * 8.64e7;
            }
        }
      };
    },
    mounted() {
      
    },
    methods: {
      // 收起展开
      packUp() {
        if (this.searchStyle) {
          this.searchStyle = null;
        } else {
          this.searchStyle = {
            height: 0,
            padding: 0,
            overflow: "hidden",
          };
        }
        this.$emit("packUp");
      },
      // 下拉框
      selectFn(index, i, item) {
        this.$set(this.selectList, index, i);
        this.$set(
          this.formData,
          item.prop,
          item.options[i][item.optionKey.value]
        );
        item.change && this.$emit(item.change, this.formData);
        !item.change && this.search();
      },
      selectChange(index, item) {
        let ind = item.options.findIndex((el) => {
          return el[item.optionKey.value] === this.formData[item.prop];
        });
        this.$set(this.selectList, index, ind);
        item.change && this.$emit(item.change, this.formData);
        (!item.change || item.search) && this.search();
      },
      selectClear(item) {
        this.selectList = [];
        this.formData[item.prop] = "";
        this.search();
      },
      // 时间范围
      dateFn(i) {
        this.dateActive = i;
        let date = [];
        if (i == 1) {
          const end = new Date().getTime();
          let start = new Date();
          start = start.getTime() - 3600 * 1000 * 24 * 7;
          date = [start, end];
        } else if (i == 2) {
          const end = new Date().getTime();
          let start = new Date();
          start = start.getTime() - 3600 * 1000 * 24 * 30;
          date = [start, end];
        } else if (i == 3) {
          const end = new Date().getTime();
          let start = new Date();
          start = start.getTime() - 3600 * 1000 * 24 * 90;
          date = [start, end];
        }
        this.$set(this.formData, "date", date);
        this.search();
      },
      dateChange() {
        this.dateActive = "";
        this.search();
      },
      dateClear() {
        this.dateActive = "";
        this.$set(this.formData, "date", []);
        this.search();
      },
      search() {
        this.$emit("search", this.formData);
      },
      // 状态
      itemtypeChange(i, item, ite) {
        this.itemtypeactive = i;
        this.$set(this.formData, item.prop, ite.itemTypeId);
        this.search();
      },
      // 级联
      cascaderChange(emit) {
        emit && this.$emit(emit, this.formData);
        !emit && this.search();
      },
      // 时间
      yearChange(emit) {
        emit && this.$emit(emit, this.formData);
        !emit && this.search();
      },
    },
  });
  </script>
  
  <style lang="scss" scoped>
  ::v-deep textarea {
    resize: none;
  }
  
  .Form {
    padding-top: 5px !important;
    width: calc(100% - 115px);
  
    &.toggleFlag {
      flex-direction: row;
      flex-wrap: nowrap;
    }
  
    .label {
      text-align: right;
    }
  
    &.lineSearch {
      // position: absolute;
      // top: 26px;
      // max-width: 87%;
      height: 45px !important;
  
      .common-search-item {
        display: inline-block;
        margin-right: 15px;
  
        // .label {
        //   text-align: right;
        // }
  
        & > div {
          display: inline-block;
        }
  
        .dateBtnBox {
          display: none;
        }
      }
    }
  
    .common-search-item {
      margin-bottom: 10px;
      display: block;
  
      &:last-child {
        margin-bottom: 0;
      }
  
      & > div {
        width: 200px;
        vertical-align: middle;
        display: inline-block;
      }
  
      .dateRange {
        width: 400px;
      }
  
      .dateRange {
        ::v-deep .el-range-input {
          vertical-align: top;
        }
  
        ::v-deep span {
          vertical-align: top;
        }
      }
  
      .selectbutton,
      .el-checkbox-group {
        min-width: 200px;
        width: auto;
      }
  
      .label {
        width: 100px;
      }
  
      .dateBtnBox {
        display: inline-block;
        margin-left: 20px;
        margin-top: -4px;
        vertical-align: text-top;
        width: calc(100% - 540px);
  
        &.select {
          width: calc(100% - 370px);
          .dateBtn {
            display: inline-block;
            margin-bottom: 10px;
          }
        }
        .allbtn {
          margin-right: 50px;
          box-sizing: border-box;
          height: 30px;
          background: #1090ba;
          border-radius: 5px 5px 5px 5px;
          opacity: 1;
          border: 1px solid #7eb4c5;
          box-shadow: 0 0 0.1px 0.3px #75b4c750;
          padding: 1px 2px;
          color: #ffffff;
          font-size: 15px;
          width: 66px;
          vertical-align: top;
          ::v-deep > span {
            display: inline-block;
            height: 24px;
            // background: #1090ba;
            // box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3);
            // border-radius: 4px 4px 4px 4px;
            // opacity: 1;
            padding: 4.5px 15px;
          }
        }
        .optionbox {
          display: inline-block;
          width: calc(100% - 120px);
          padding-top: 6px;
        }
        .dateBtn {
          margin-right: 20px;
          cursor: pointer;
          min-width: 70px;
          &.active {
            color: #51b9ba;
          }
        }
      }
    }
  }
  .operationBtn {
    // width: 100%;
    text-align: right;
    margin-bottom: 10px;
    position: absolute;
    right: 15px;
  
    .screenBtn {
      display: inline-block;
      margin-top: 7px;
      margin-right: 6px;
      background-color: #02bcec;
      border-radius: 5px;
      height: 32px;
      width: 106px;
      cursor: pointer;
      text-align: center;
      font-size: 16px;
      padding-top: 2.5px;
  
      .btn {
        padding-top: 3px;
        margin: 0 2px;
        text-align: center;
        font-size: 16px;
        display: inline-block;
        width: 100px;
        height: 26px;
        background-color: #02bcec;
        box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.4);
        border-radius: 4px;
        opacity: 1;
      }
    }
  }
  .butt-list-sty {
    height: 36px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    position: relative;
    .basebut1 {
      width: 100px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background-color: transparent;
      border: #6ecae3 1px solid;
      color: turquoise;
      cursor: pointer;
    }
    .basebut2 {
      width: 100px;
      height: 36px;
      line-height: 32px;
      text-align: center;
      background-color: transparent;
      border: #6ecae3 1px solid;
      cursor: pointer;
    }
    .toprightred {
      background-color: #f56c6c;
      border-radius: 10px;
      color: #fff;
      display: inline-block;
      font-size: 12px;
      height: 18px;
      line-height: 18px;
      padding: 0 6px;
      text-align: center;
      white-space: nowrap;
      border: 1px solid #fff;
      position: absolute;
      top: -5px;
    }
  }
  </style>
  
  
  